<template>
  <div>
      <van-nav-bar
         left-arrow
        class="app-nav-bar"
        title="考勤列表(缺勤,晚归)"
        @click-left="$router.back()"
      />
      <el-form style="padding:20px 10px 0 10px;background-color:#fff" :inline="true" class="demo-form-inline">
        <el-form-item label="请假日期">
            <el-date-picker
                v-model="date"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期">
                </el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="mini" @click="getEventListAll">查询</el-button>
        </el-form-item>
         <el-form-item>
            <el-button type="success" size="mini" @click="AttenceExcList">异常处理列表</el-button>
        </el-form-item>
        </el-form>
       
        <el-table :data="tableData" style="width:100%">
          <el-table-column label="学号" align="center">
              <template slot-scope="scope">
                  <span style="margin-left:10px">{{scope.row.id}}</span>
              </template>
          </el-table-column>
          <el-table-column label="班级" align="center">
              <template slot-scope="scope">
                  <span style="margin-left:10px">{{scope.row.className}}</span>
              </template>
          </el-table-column>
          <el-table-column label="学生姓名" align="center">
              <template slot-scope="scope">
                  <span style="margin-left:10px">{{scope.row.studentName}}</span>
              </template>
          </el-table-column>
          <el-table-column label="宿舍" align="center">
              <template slot-scope="scope">
                  <span style="margin-left:10px">{{scope.row.dorAddress}}</span>
              </template>
          </el-table-column>
          <el-table-column label="缺勤日期" align="center">
              <template slot-scope="scope">
                  <span style="margin-left:10px">{{scope.row.accessDate}}</span>
              </template>
          </el-table-column>
          <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                  <span style="margin-left:10px" v-if="scope.row.attenceStatus === '0'">正常</span>
                  <span style="margin-left:10px" v-if="scope.row.attenceStatus === '1'">请假</span>
                  <span style="margin-left:10px" v-if="scope.row.attenceStatus === '2'">缺勤</span>
                  <span style="margin-left:10px" v-if="scope.row.attenceStatus === '3'">晚归</span>
              </template>
          </el-table-column>
        </el-table>
  </div>
</template>

<script>
export default {
  data(){
    return{
      tableData:[],
      date:''
    }
  },
  methods:{
   async getEventListAll(){
            var {data:res} = await this.$axios({
                url:this.$location.listAbsenceStu,
                params:{
                    checkDate:this.date
                }
            })
            console.log(res.data)
            this.tableData=res.data
       },
      AttenceExcList(){
        const vm = this;
        vm.$router.push({name: 'AttenceExcList', params: { id: 10 }})
      }
    
    },
    created(){
        this.getEventListAll()
    }
}
</script>

<style lang="less" scoped>
    /deep/ .app-nav-bar{
        background-color: #35d299;
        .van-nav-bar__title{
            color: #fff;
        }
        .van-icon{
            color: #fff;
            
        }
    }
    
</style>